<!DOCTYPE html>
<html>
<head>
	<title>更改元素属性</title>
<!-- 
获取元素方式
1.document.getElementById()
2.document.getElementsByClassName()
3.document.getElementsByName()
4.document.getElementsByTagName()
5.document.querySelector()
6.document.querySelectorAll()

获取节点
ps：节点包含空格，回车，文本和元素
pss：元素是标签
	1.childNodes 返回的是伪数组 子节点包括（空格，回车，文本，元素）
	2.children 获取子元素<——注：元素
	3.firstChild 第一个节点 （节点）
	4.firstElementChild 第一个子元素
	5.lastChild 最后一个节点
	6.lastElementChild 最后一个元素
	7.parentNode 父亲节点
	8.parentElement 父亲元素
	9.previous  Sibling 上一个兄弟节点 
	10.previousElementSibling 上一个兄弟元素 只函标签
	11.nextSibling下一个兄弟节点
	12.NextElementSibling下一个兄弟元素
	

对元素进行增删改查
	1.创建元素createElement//科瑞特
	对象.createElement("标签名称");
	var div = document.createElement("div");
	2.创建文本节点createChildText
	对象.createChildTextNode("文本内容")
	3.appendChild追加一个节点(包括文本节点和元素节点)
	4.removeChild 删除节点

 -->
</head>
<script type="text/javascript">
window.onload = function(){
	//获取id box 的对象 -找对象
var p = document.getElementById("box");
var div = document.createElement("div");
// var divText = document.createElementTextNode("666999");
	//给按钮绑定事件(事件处理函数，函数记住是函数)
	
var btn1 = document.getElementById("btn");
	btn1.onclick = function(){
	p.style.width="300px";
	p.style.background = "red";
	p.style.height = "500px";
	console.log("笑带四猪虐五狗");
	div.style.width = "300px";
	div.style.height = "600px";
	div.style.backgroundColor = "#666";
	//个新增的div添加文本
	div.appendChild(divText);
	//新增div添加到box

}




}
</script>
<style type="text/css">
#box{
	height: 100px;
	width:100%;
	background-color: green;
}



</style>
<body>
	<div id="body">
		<p id="box" style="width:500px">一次就好</p>
	</div>
	<button id="btn">没定义没内容的按钮好小啊</button>


</body>
</html>